<template>
  <div class="author-meta">
    <div class="author-avatar">
      <img :src="image" :alt="username">
    </div>
    <div class="author-username">
      <h4>
        <router-link
          :to="{name: 'profile', params: {username: username}}"
        >
          {{username}}
        </router-link>
      </h4>
      <p>发表于 {{(new Date(createdTime)).toLocaleString()}}</p>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    props: {
      image: {
        type: String,
        required: true
      },
      username: {
        type: String,
        reruired: true
      },
      createdTime: {
        type: String,
        required: true
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import "src/assets/scss/variables.scss";
  .author-meta {
    display: flex;
  }
  .author-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .author-username {
    margin-left: 20px;
    a {
      display: block;
      height: 20px;
      font-size: 16px;
      color: crimson;
    }
    p {
      height: 20px;
      font-size: 14px;
      // color: $blue-gray;
    }
  }
</style>